<template name="AssessScoresView">
	<view class="assess-scores">
		<view v-if="dimensionScoresCompare === null" class="assess-title">
			<text>智龄(月):{{wisdomAge.toFixed(1)}}</text>
			<text>发育商DQ:{{dqFraction.toFixed()}}</text>
			<text>{{level}}</text>
		</view>
		<view class="root">
			<view v-if="dimensionScoresCompare" class="row">
				<view class="item title-left">测试<br>能区</view>
				<view class="item content-left">发育商(本次)</view>
				<view class="item content-middle">发育商(上次)</view>
			</view>
			<view v-else class="row">
				<view class="item title-left">测试<br>能区</view>
				<view class="item content-left">智龄(月)</view>
				<view class="item content-middle">发育商</view>
			</view>
			<view class="row" v-for="(item,index) in dimensionScores" :key="item.dimensionNamev2">
				<view class="item" :class="index===5?'title-right':'title-middle'">
					<text>
						{{ item.dimensionNamev2 }}
					</text>
				</view>
				<view v-if="!dimensionScoresCompare" class="item content-middle">{{item.month.toFixed(1)}}</view>
				<view class="item" :class="index==5?'content-right':'content-middle'">{{item.dqFraction.toFixed()}}</view>
				
				<view v-if="dimensionScoresCompare" class="item" :class="index==5?'content-right':'content-middle'">{{dqCompareF(index)}}</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name:"AssessScoresView",
		
		props:{
			dimensionScores:{
				type: Array,
				default () {
					return []
				}
			},
			
			dimensionScoresCompare:{
				type: Array,
				default () {
					return null
				}
			},
			
			wisdomAge: {
				type: Number,
				default () {
					return 0
				}
			},
			dqFraction: {
				type: Number,
				default() {
					return 0
				}
			},
			level: {
				type: String,
				default () {
					return ''
				}
			},
			
		},
		
		methods: {
			dqCompareF(index) {
				console.log(index);
				if (this.$props.dimensionScoresCompare != null){
					var dq = this.$props.dimensionScoresCompare[index].dqFraction;
					return dq.toFixed();
				}
				return 0;
			}
		},
		
		data() {
			return {
				
			};
		},
		
	}
</script>

<style lang="scss">
	.assess-scores {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.assess-title {
		color: #666666;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	
	.root {
		display: flex;
		flex-direction: row;
		font-size: 20rpx;
		flex-grow: 1;
	}

	.row {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #007AFF;
		height: 80rpx;
		margin: 0.25rpx;
	}

	.title-left {
		background-color: #FACB2F;
		border-top-left-radius: 8rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		@include assess-scores-bg();
	}

	.title-middle {
		background-color: #FACB2F;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		@include assess-scores-bg();
	}

	.title-right {
		background-color: #FACB2F;
		border-top-right-radius: 8rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		@include assess-scores-bg();
	}

	.content-left {
		background-color: #FDEFBF;
		border-bottom-left-radius: 8rpx;
		color: #666666;
		font-size: 20rpx;
		@include assess-scores-bg-t();
	}

	.content-middle {
		background-color: #FDEFBF;
		color: #666666;
		font-size: 20rpx;
		@include assess-scores-bg-t();
	}

	.content-right {
		background-color: #FDEFBF;
		border-bottom-right-radius: 8rpx;
		color: #666666;
		font-size: 20rpx;
		@include assess-scores-bg-t();
	}
</style>
